<template>
  <div class="app-container">
    <el-form label-width="120px" :model="form">
      <el-form-item label="车辆VIN码" prop="vin">
        <el-input name="vin" ref="vin" v-model="form.vin" @keyup.prevent.native.enter="queryKeypart"></el-input>
      </el-form-item>
      <el-form-item label="安装零件序列号" prop="keyparts">
        <el-input name="keyparts" ref="keyparts" v-model="form.keyparts" @keyup.prevent.native.enter="matchKeypart"></el-input>
      </el-form-item>
    </el-form>
    <div class="tag-group">
      <h3 class="tag-group__title">未绑定关键件</h3>
      <el-tag
        style="margin: 10px"
        v-for="(item, index) in unBindKeyparts"
        :key="item.index"
        :type="'danger'"
        effect="plain"
      >{{ item.keypartTypeDesc }}</el-tag>
    </div>
    <div class="tag-group">
      <h3 class="tag-group__title">已绑定关键件</h3>
      <el-tag
        style="margin: 10px"
        v-for="(item, index) in bindedKeyparts"
        :key="item.index"
        :type="'success'"
        effect="plain"
      >{{ item.keypartTypeDesc }}</el-tag>
    </div>
  </div>
</template>
<script>
import { queryKeypart, matchKeypart } from "@/api/mes-web/keyparts-scan";
export default {
  name: "KeypartsScan",
  data() {
    return {
      // 用户名及绑定工位
      keypartsname: "",
      ulocNo: "",
      form: {
        vin: "",
        keyparts: ""
      },
      bindedKeyparts: [],
      unBindKeyparts: [],
      // rules: {
      //   vin: [ { required: false } ],
      //   keyparts: [ { required: false } ]
      // }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.vin.focus()
    })
  },
  created() {
    this.keypartsname = this.$store.getters.keypartsname;
    this.ulocNo = this.$store.getters.ulocNo;
    // console.log(this.keypartsname, this.ulocNo);
  },
  methods: {
    queryKeypart(event) {
      // if (event.keyCode === 13) { //如果按的是enter键 13是enter 
      //   event.preventDefault(); //禁止默认事件（默认是换行） 
      //   const data = { ulocNo: this.ulocNo, vin: this.form.vin };
      //   queryKeypart(data).then(res => {
      //     // console.log(res);
      //     this.unBindKeyparts = res.data.unBindKeyparts
      //     this.bindedKeyparts = res.data.bindedKeyparts
      //     // 成功则切换到零件号输入框
      //     this.$refs.keyparts.focus()
      //   });       
      // }
      const data = { ulocNo: this.ulocNo, vin: this.form.vin };
      if (!this.ulocNo || this.ulocNo === '') {
        this.$message.warning('登陆态失效，请重新登陆')
        return 
      }
      queryKeypart(data).then(res => {
        if (res.code === 200) { 
          this.unBindKeyparts = res.data.unBindKeyparts
          this.bindedKeyparts = res.data.bindedKeyparts
          // 成功则切换到零件号输入框
          this.$refs.keyparts.focus()
        } else {
          this.$refs.vin.select()
        }
      });   
    },
    matchKeypart(event) {
      // if (event.keyCode === 13) { //如果按的是enter键 13是enter 
      //   event.preventDefault(); //禁止默认事件（默认是换行） 
      //   const data = { username: this.keypartsname, keyparts: this.form.keyparts, vin: this.form.vin, ulocNo: this.ulocNo }
      //   matchKeypart(data).then(res => {
      //     // console.log(res);
      //     this.unBindKeyparts = res.data.unBindKeyparts
      //     this.bindedKeyparts = res.data.bindedKeyparts
      //     if (this.unBindKeyparts.length === 0) {
      //       this.ininScan()
      //     } else {
      //       this.form.keyparts = ''
      //     }
      //   });      
      // }
      const data = { username: this.keypartsname, keyparts: this.form.keyparts, vin: this.form.vin, ulocNo: this.ulocNo }
      if (!this.ulocNo || this.ulocNo === '') {
        this.$message.warning('登陆态失效，请重新登陆')
        return 
      }
      matchKeypart(data).then(res => {
        if (res.code === 200) {
          this.unBindKeyparts = res.data.unBindKeyparts
          this.bindedKeyparts = res.data.bindedKeyparts
          if (this.unBindKeyparts.length === 0) {
            this.ininScan()
          } else {
            this.form.keyparts = ''
          }
        } else {
          this.$refs.keyparts.select()
        }
      });
    },
    ininScan() {
      this.$message.success('车辆'+ this.form.vin + '关键件扫描完成！');
      setTimeout(() => {
        this.form.vin = ''
        this.form.keyparts = ''
        this.$refs.vin.focus()
        this.unBindKeyparts = []
        this.bindedKeyparts = []
      }, 1000)
    }
  },
  destroyed() {}
};
</script>